<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>测试前后端分离 数据交互</title>
    <base th:href="@{/}">
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>
    <style>
        #table {
            width: 800px;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
        }

        #table th, #table td {
            border: 1px solid black;
            width: 200px;
        }

        table {
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>模块练习页面</h1>
        <hr>
        <table id="table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>ID号</th>
                    <th>用户名</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="5" v-if="userList.length===0">
                        <h3>用户信息为空,请添加用户信息~</h3>
                    </td>
                </tr>
                <tr v-for="(user,index) in userList">

                    <td v-text="index+1">1</td>
                    <td v-text="user.userid">1001</td>
                    <td v-text="user.username">张三</td>
                    <td v-text="user.email">888@qq.com</td>
                    <td>
                        <a>
                            <button @click.prevent="findUserById(user.userid)">编辑</button>
                        </a>
                        <a>
                            <button @click.prevent="deleteUser(user.userid)">删除</button>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr>
        <form action="" method="post">
            <table id="add-user">
                <caption>新增用户</caption>
                <tbody>
                    <tr>
                        <td>用户名:</td>
                        <td><input type="text" name="username" v-model="user.username"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" name="pwd" v-model="user.password"></td>
                    </tr>
                    <tr>
                        <td>邮箱:</td>
                        <td><input type="text" name="email" v-model="user.email"/></td>
                    </tr>
                    <tr>
                        <td>
                            <button type="submit" @click.prevent="addUser">提交</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
        <hr>
        <form action="#">
            <table id="update-user">
                <!--   通过隐藏域的方式 实现主键的提交 -->
                <input type="hidden" name="userid">
                <caption>修改用户</caption>
                <tbody>
                    <tr>
                        <td>用户名:</td>
                        <td><input type="text" name="username" v-model="updateUser.username"></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input type="password" name="pwd" v-model="updateUser.pwd"
                                   placeholder="默认密码不修改, 如果赋值则修改"></td>
                    </tr>
                    <tr>
                        <td>邮箱:</td>
                        <td><input type="text" name="email" v-model="updateUser.email"></td>
                    </tr>
                    <tr>
                        <td>
                            <button type="submit" @click.prevent="updateUserByUser">提交</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </form>
    </div>

    <script type="module">
        Vue.config.productionTip = false;
        axios.defaults.baseURL = 'http://localhost:8080/ajax-demo';
        new Vue({
            el: "#app",
            data: {
                user:{
                    username: '',
                    password: '',
                    email:''
                },
                updateUser:{
                    userid:0,
                    username: '',
                    password: '',
                    email:''
                },
                userList: []
            },
            methods: {
                async findUserList() {
                    const {data} = await axios.get("/user?method=findUsers");
                    data.flag ? this.userList = data.data : alert("获取数据失败!");
                },
                // 添加用户 需要双向绑定
                async addUser(){
                    const {data} = await axios.get("/user",{
                        params:{
                            method:'addUser',
                            username: this.user.username,
                            pwd: this.user.password,
                            email: this.user.email
                        }
                    })
                    if(data.flag){
                        alert("新增成功~~~");
                        this.user={};
                        // 刷新页面
                        this.findUserList();
                    }else {
                        alert("新增失败~~~")
                    }
                },
                async deleteUser(userid){
                    if(!confirm("确认删除吗?")) return;
                    const {data} = await axios.get("/user",{
                        params: {
                            method:'deleteById',
                            userid:userid
                        }
                    })
                    if(data.flag){
                        alert("删除成功~~~");
                        this.user={};
                        // 刷新页面
                        this.findUserList();
                    }else {
                        alert("删除失败~~~")
                    }
                },
                async findUserById(userid){
                    const {data} = await axios.get("/user",{
                        params: {
                            method:'findUserById',
                            userid:userid,
                        }
                    });
                    if(data.flag){
                       this.updateUser = data.data;
                    }

                },
                async updateUserByUser(){
                    const {data} = await axios.get("/user",{
                        params:{
                            method:'updateUser',
                            userid: this.updateUser.userid,
                            username: this.updateUser.username,
                            pwd: this.updateUser.pwd,
                            email: this.updateUser.email
                        }
                    })
                    if(data.flag){
                        alert("更新成功~~~");
                        this.user={};
                        // 刷新页面
                        this.findUserList();
                    }else {
                        alert("更新失败~~~")
                    }
                }
            },
            created() {
                // 在Vue 创建时获取数据
                this.findUserList();
            }
        });
    </script>
</body>
</html>